<template>
    <el-dialog :visible.sync="is_add_children_show" title="添加下级" :before-close="handleClose">
        <el-form label-width="180px" style="width:80%;">
            <el-form-item label="下级项目编号：">
                <el-input v-model="project_num"></el-input>
            </el-form-item>
            <el-form-item label="挂接到以下项目：">
                <el-tree ref="department_tree" check-strictly @check-change="handleCheckChange" :data="sys_department_tree" node-key="id" :props="props" show-checkbox>
                </el-tree>
            </el-form-item>
            <el-form-item>
                <el-button @click="handleClose">取消</el-button>
                <el-button @click="onSubmit" type="primary">确定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import department from "@/api/department.js";
import project from "@/api/project.js";
import {mapGetters} from 'vuex';

export default {
    name: "project-wait-add-children",
    props: ["is_add_children_show"],
    computed: {
        ...mapGetters('department1', ['sys_department_tree'])
    },
    data() {
        return {
            // department_tree: undefined,
            props: {
                label: "text",
                children: "children",
                value: "id"
            },
            project_num: undefined,
            i: 0,
            refresh: false
        };
    },
    methods: {
        handleClose() {
            this.$emit("addChildren", {show: false, refresh: this.refresh});
            this.refresh = false;
            this.project_num = undefined;
            this.$refs['department_tree'].setCheckedNodes([]);
            this.i = 0;
        },
        getDepandedArr(data) {
            for (let i = 0, len = data.length; i < len; i++) {
                if (data[i].children.length > 0) {
                    this.getDepandedArr(data[i].children);
                    data[i].disabled = true;
                }
            }
        },
        handleCheckChange(data,checked, node) {
            this.i++;
            if(this.i%2==0){
                if(checked){
                    this.$refs['department_tree'].setCheckedNodes([]);
                    this.$refs['department_tree'].setCheckedNodes([data]);
                    //交叉点击节点
                }else{
                    this.$refs['department_tree'].setCheckedNodes([]);
                    //点击已经选中的节点，置空
                }
            }
        },
        onSubmit() {
            let num = this.$refs['department_tree'].getCheckedKeys()
            if (num && this.project_num) {
                project.addProjectChildren({department: num[0], projectNumber: this.project_num}).then(res => {
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    })
                    this.refresh = true
                    this.handleClose()
                }).catch(err => {
                    this.$message.error(err)
                })
            }
        }
    },
    async mounted() {
        if (this.sys_department_tree === undefined) {
            await this.$store.dispatch('department1/getSysDepartmentTree');
            this.getDepandedArr(this.sys_department_tree);
        }
    }
};
</script>

<style>
</style>
